<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>滚动播放数据</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #scrollingDiv {
      /* font-family: Arial, sans-serif; */
      border: 1px solid #ccc;
      padding: 10px;
      width: 300px;
      height: 100px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="scrollingDiv">
    <p></p>
    <p></p>
  </div>

  <script>
    var data = [
      {
        "id": null,
        "juejinmianname": null,
        "caijueduiwu": null,
        "zhizaiyinsu": null,
        "yujingjibie": 4,
        "julifanwei": 0.0,
        "yujingshijian": null,
        "kjdm": null
      },
      {
        "id": "fd29ac11f1d5489f80e9d71a91d5c380",
        "juejinmianname": "na1",
        "caijueduiwu": "na11",
        "zhizaiyinsu": "na12",
        "yujingjibie": 1,
        "julifanwei": 100.23,
        "yujingshijian": "2024/01/23 12:01:00",
        "kjdm": "dltj"
      },
      {
        "id": "6eaacfeeadf846688acb69958ba40851",
        "juejinmianname": "na11",
        "caijueduiwu": "na11",
        "zhizaiyinsu": "na12",
        "yujingjibie": 2,
        "julifanwei": 100.23,
        "yujingshijian": "2024/01/23 10:01:00",
        "kjdm": "dlti"
      }
    ];

    var index = 0;
    var scrollingDiv = $("#scrollingDiv");

    function displayData() {
      scrollingDiv.find("p").eq(0).text("caijueduiwu: " + data[index].caijueduiwu);
      scrollingDiv.find("p").eq(1).html(
        "juejinmianname: " + data[index].juejinmianname + "<br>" + 
        "zhizaiyinsu: " + data[index].zhizaiyinsu + "<br>" + 
        "julifanwei: " + data[index].julifanwei + "<br>" + 
        "yujingshijian: " + data[index].yujingshijian
      );

      index++;
      if (index >= data.length) {
        index = 0;
      }
    }

    displayData(); // 初始展示第一条数据

    setInterval(displayData, 3000); // 每隔3秒更新一次数据
  </script>
</body>
</html>